<template>
	<view class="flow">
		<view class="black_1">
			<view class="left">
				<view class="line_1">
					<text class="text1">ZY数量</text>
					<!-- <image v-if="account_type =='debris'" class="img" src="../../static/my/shuipian2.png"></image> -->
				</view>
				<view class="text2">
					{{Number(user.new_stock_account).toFixed(2)}}
				</view>
			</view>
			<view class="left">
				<view class="line_1">
					<text class="text1">绿色积分</text>
					<!-- <image v-if="account_type =='debris'" class="img" src="../../static/my/shuipian2.png"></image> -->
				</view>
				<view class="text2">
					{{Number(user.new_green_account).toFixed(2)}}
				</view>
			</view>
			<!-- <view class="right" v-if="usdt_open" @click="toSend()">
				<view class="text1">转赠</view>
			</view> -->
		</view>
		<view class="black_2">
			<view class="title">
				<template v-for="(item,index) in tabs">
					<view >
						<view @click="selecttab(index)" class="text1" :style="index == current?'color: #FE903D;':''" >{{item}}
						
						</view>
						 <view :class="index == current?'action':''"></view>
					</view>
				</template>
				<view v-if="account_type == 'usdt'" class="text1" @click="selecttab(3)" :class="current == 3?'action':'' ">冻结</view>
			</view>
			<template v-for="(item,index) in list">

				<view class="item">
					<view class="left">
						<view class="text1">{{item.memo}}</view>
						<view class="text2">时间：
						<uni-dateformat :date="item.created_at" >
						</uni-dateformat>
						</view>
					</view>
					<view class="right" :style="getStyleColor(item)">
						{{item.action_type == 1?'+':'-'}}{{Number(item.number).toFixed(2)}}
					</view>
				</view>
				<view class="time" v-if="item.freeze_end_time>0">
					<view class="text1">解冻剩余：
						<uni-countdown color="#67BB63" splitorColor="#67BB63" :showDay="false"
							:timestamp="item.freeze_end_time">
						</uni-countdown>
					</view>
				</view>
				<view class="line"></view>
			</template>
		</view>

		<send ref="send_pop" :success="sendSuccess"></send>
	</view>
</template>

<script>
	import send from '../../components/Send/Send.vue'

	export default {
		components: {
			send
		},
		data() {
			return {
				list: [{
					"amount": "10.00",
					"after": "4050.00",
					"memo": "出售[100]-冻结",
					"create_time": 1685868827,
					"freeze_end_time": 1685869427
				}],
				tabs: [
					"ZY明细", "积分明细"
				],
				current: 0,
				//usdt：usdt明细(默认)，gasoline：汽油明细，debris：碎片明细，speed_up：加速卡明细，jackpot：共创经济参与记录
				accountTypeArr: ['zy', 'green', 'debris', 'speed_up', 'jackpot'],
				account_type: '',
				typeArr: ['sr', 'sy', 'zc', 'dj'], //sr:收入(默认)，sy：收益，zc：支出，dj：冻结
				amount: 0,
				amountDanwei: '',
				page: 1,
				name: '',
				usdt_open: false,
				placeholder:'',
				user: {
					"mobile": "",
					        "nick_name": "",
					        "invite_code": "",
					        "id": 0,
					        "avatar": "",
					        "new_green_account": "",
					        "new_stock_account": ""
				},
			};
		},
		onLoad(opt) {
			console.log(opt.type)
			// this.amount = opt.amount
			this.name = "账户明细"
			// if (opt.type == 1) {
			// 	this.name = "USDT账户"
			// 	this.amountDanwei = "K"
			// } else if (opt.type == 2) {
			// 	this.name = "碎片账户"
			// 	this.amountDanwei = ''
			// } else if (opt.type == 3) {
			// 	this.name = "加速卡账户"
			// 	this.amountDanwei = ''
			// }
			// this.account_type = this.accountTypeArr[opt.type]
			uni.setNavigationBarTitle({
				title: this.name
			})
			this.userInfo()
			// this.api.http.requests('common/webSetting', {}, res => {
			// 	if (opt.type == 1) {
			// 		this.usdt_open = res.data.transfer.usdt_open
			// 		this.placeholder = res.data.transfer.num_multiple.usdt
			// 	} else if (opt.type == 0) {
			// 		this.usdt_open = res.data.transfer.gasoline_open
			// 		this.placeholder = res.data.transfer.num_multiple.gasoline
			// 	} else if (opt.type == 3) {
			// 		this.usdt_open = res.data.transfer.speed_up_open
			// 		this.placeholder = res.data.transfer.num_multiple.speed_up
			// 	}else if (opt.type == 2) {
			// 		this.usdt_open = res.data.transfer.debris_open
			// 		this.placeholder = res.data.transfer.num_multiple.debris
			// 	}

			// }, "POST")

		},
		onShow() {
			this.list.length = 0
			this.page = 1
			this.getList()
		},
		methods: {
			toSend() {
				this.$refs.send_pop.open(this.account_type,this.placeholder)
			},
			userInfo() {
				var that = this;
				this.api.http.requests('user/info', {}, res => {
					if(res.data){
							that.user = res.data
							try{
								let index = that.user .new_green_account.indexOf('.')
								let index2 = that.user .new_stock_account.indexOf('.')
								that.user .new_green_account = that.user .new_green_account.slice(0,index+3)
								that.user .new_stock_account = that.user .new_stock_account.slice(0,index2+3)
							}catch(e){
								
							}
							
					}
				
				}, "POST")
			},
			isShowTime(time) {
				if (time <= 0)
					return false
				let date = new Date(time);
				let date2 = new Date()
				let dat = date.getTime() * 1000 - date2.getTime()
				if (dat > 0) {
					return true
				} else {
					return false
				}

				return true
			},
			getStyleColor(item) {
				if (this.isShowTime(item.freeze_end_time))
					return 'color:#FF8F39'

				if (item.action_type == 2)
					return 'color:#FF2E2E'
					if (item.action_type == 1)
						return 'color:#67BB63'
			},
			selecttab(index) {
				this.current = index
				this.page = 1
				this.list.length = 0
				this.getList()
			},
			getList() {
				var data = {
					account_type: this.accountTypeArr[this.current],
					// type: this.typeArr[this.current],
					page: this.page
				}

				var that = this
				this.api.http.requests('accountlog/lists', data, res => {
					if (res.data && res.data.length > 0) {
						that.list = that.list.concat(res.data)
					}
				}, "POST")
			},
			getInfo() {
				var that = this;
				this.api.http.requests('user/info', {}, res => {
					that.amount = that.getAccounts(res.data.accounts,this.account_type)
				}, "POST")
			},
			getAccounts(accounts,type) {
				var amount = '0.00'
				accounts.forEach((item) => {
					if (type == item.type) {
						amount = item.amount
						return amount
					}
				})
				return amount
			},
			sendSuccess(){
				this.getInfo()
			}
		},
		onReachBottom() {
			this.page = this.page + 1
			this.getList()
		}
	}
</script>

<style scoped lang="less">
	.black_1 {
		background: #FE903D;
		display: flex;
		justify-content: space-between;

		padding: 20px;

		.left {
			.line_1 {

				.text1 {

					font-size: 30rpx;
					font-weight: 400;
					color: #FFE6D5;
				}

				.img {
					margin-left: 10px;
					width: 12px;
					height: 12px;
				}
			}

			.text2 {

				font-size: 63rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.right {

			.text1 {
				background: #FFFFFF;
				border-radius: 18px 18px 18px 18px;
				padding: 5px 20px;
				color: #FE903D;
			}
		}

	}

	.black_2 {

		// padding: 0px 20px 20px 20px;
		.title {
			margin-bottom: 10px;
			display: flex;
			// justify-content: space-between;
			font-size: 28rpx;
			font-weight: 400;
			color: #969696;
			text-align: center;
			padding: 0px 20px;

			.text1 {
				padding: 15px 20px;
			}

			

			border-bottom: 1rpx solid #ECECEC;
		}
		
		.action {
			color: #FE903D;
			font-weight: bold;
			border-bottom: 2px solid #FE903D;
			width: 40px;
			    /* text-align: center; */
			    margin: auto;
		}

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 20px;

			.left {
				font-size: 28rpx;
				font-weight: bold;
				color: #1C1C1C;

				.text2 {
					margin-top: 10px;
					font-weight: 400;
					color: #666666;
				}
			}

			.right {
				font-size: 35rpx;
				font-weight: 800;
				color: #FE903D;
			}
		}

		.time {
			padding: 0px 20px;
			display: flex;

			.text1 {
				// margin: 5px 0rpx;
				background: #FFFFFF;
				// padding: 2px 5px;
				font-size: 25rpx;
				font-weight: 400;
				color: #FE903D;
				// border-radius: 4px 4px 4px 4px;
				// border: 1px solid #FE903D;
				display: flex;
			}

		}

		.line {

			height: 1px;
			margin: 10px 10px;
			border-bottom: 1upx solid #DFDFDF;
		}
	}
</style>